The Best Like Button™️
Wow your users!
People love to like things. And now they'll love to like even more things with The Best Like Button™️ on The Internet.
Recommended: add text next to the button however you like to display e.g. number of likes.
Bonus! See this button in action on the Nordcraft package pages.
Demo
Components
best-like-button
Just wow.
Attributes
Configure the following attributes for each instance of the best-like-button component.
border_color A color as a CSS color, hex code, or RGB value to style the border around the heart icon. border_radius A number that specifies the border radius of the button in pixels (e.g. 8). color A color as a CSS color, hex code, or RGB value to style the fill of the heart icon. focus_outline_color A color as a CSS color, hex code, or RGB value to determine the color of the button focus outline. focus_outline_width A number that specifies the width of the focus outline in pixels (e.g. 6). item_name Provide the name of the item to like/unlike, which generates an accessible button label. liked Set to true to fill the heart to indicate a given like, set false to unset the fill. Set liked to true or false based on API responses on load. Clicking the heart automatically toggles the liked variable inside so you don't need to wait for API responses. number_of_hearts Define how many hearts you would like to see explode out of the main heart. Really big numbers don't work that well. The ideal number is 7. size A number that specifies the height and width of the heart icon in pixels (e.g. 44).
Events
click-best-like-button
Use this event on the component to process logic when The Best Like Button™️ is clicked.
Internal variables
clicked: true/false
default: false
Controls when the animations run. The variable is set to true when the button is clicked, and set to false when the animation ends.
liked: true/false
default: set by the liked attribute
Setting liked to true fills the heart. This variable can be set based on API responses to fill or empty the heart accordingly on page load. Clicking the button automatically toggles the liked boolean.